<template>
  <!-- 布局组件 左图-->
  <div class="layitem">
    <div class="layitem_warp">
      <div class="layitem_item">
        <!-- 左边 -->
        <div class="layitem_item_left wow zoomIn">
          <img :src="rtdata.imgurl" alt="" />
        </div>
        <!-- 右边 -->
        <div class="layitem_item_right">
          <h4>{{rtdata.title}}</h4>
          <ul class="layitem_item_right_content">

            <li class="layitem_item_right_t" v-for="(item,i) in rtdata.list" :key="i">
              <div class="layitem_item_right_i">
                <img :src="item.icon" alt="" />
              </div>
              <div class="layitem_item_right_c">
                <h4> {{item.name}} </h4>
                <p> {{item.content}} </p>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    WOW
  } from 'wowjs';
  export default {
    name: "layitem",
    props: ["rtdata"],
    data() {
      return {

      }
    },
    mounted() {
      // console.log(this.rtdata)
      /* wowjs动画 */
      this.$nextTick(() => {
        var wow = new WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: true,
          live: true
        })
        wow.init();
      })
    },
  };

</script>

<style scoped>
  .layitem {
    background: #ffffff;
  }

  .layitem_warp {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px;
  }

  .layitem_item {
    display: flex;
    justify-content: space-around;
    padding-top: 40px;
  }

  .layitem_item_left {
    width: 520px;
    text-align: center;
  }

  .layitem_item_left>img {
    width: 420px;
  }

  .layitem_item_right {
    width: 520px;
  }

  .layitem_item_right>h4 {
    font-size: 24px;
    color: #1d2845;
  }

  .layitem_item_right_t {
    display: flex;
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .layitem_item_right_i>img {
    width: 40px;
  }

  .layitem_item_right_c {
    margin-left: 20px;
  }

  .layitem_item_right_c>h4 {
    font-size: 18px;
    color: #1d2845;
    margin-bottom: 15px;
  }

  .layitem_item_right_c>p {
    font-size: 14px;
    color: #8690a0;
    line-height: 21px;
  }

</style>
